import React from "react";
import styled from "@emotion/styled";
import { KanbanColumn } from "./column";
import { ScreenContainer } from "components/lib";
import { useDocumentTitle } from "hooks/useDocumentTitle";
import { useKanbans, useKanbanSearchParams, useProjectInUrl } from "./util";
import { SearchPanel } from "./search-panel";

export const KanBan = () => {
  useDocumentTitle("看板列表");

  const { data: currentProject } = useProjectInUrl();
  const { data: kanbans, isLoading: kanbanIsLoading } = useKanbans(
    useKanbanSearchParams()
  );

  return (
    <ScreenContainer>
      <h1>看板</h1>
      <SearchPanel />
      <ColumnsContainer>
        {kanbans?.map(
          (kanban: { id: string | number | null | undefined }, index: any) => (
            <KanbanColumn kanban={kanban} key={kanban.id} />
          )
        )}
      </ColumnsContainer>
    </ScreenContainer>
  );
};

export const ColumnsContainer = styled("div")`
  display: flex;
  overflow-x: scroll;
  flex: 1;
`;
